<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>小工具</title>
	 <script language="javascript">function click() {if (event.button==2) {alert('本站不准使用右键，使用左键吧！^_^') }}document.onmousedown=click</script> 
	 <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
		<script src="./vue.js/vue.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-image:linear-gradient(141deg,#9fb8ad 0%,#1fc8db 51%,#2cb5e8 75%);
			}
			@media screen and (min-width: 700px) {
			   .nav{
				   display: none;
			   } 
			}
			@media screen and (max-width: 700px) {
			    .mybox{
					 display: none;
					 
				 }
			}
			 .mybox{
				 float: right;
				
				 width: 300px;
				 height: 600px;
				 
			 }
			  .mybox::after{
				  clear: both;
			  }
			  .nav{
				  padding: 0;
				  width: 100%;
				  height: 150px;
			  }
			 .picBg{
				 width: 100%;
				 height: 150px;
				 background-image:url(img/20131217153324897.jpg);
				 background-size: auto;
			 }
			 .pic{
				 margin: 20px auto;
				 width: 100px;
				 height: 100px;
				  border-radius: 50%;
				  overflow: hidden;
			 }
			 .Inp{
				 width: 200px;
				 height: 40px;
				 margin: 10px 20px 0 10px;
			 }
			 .Btn{
				 width: 100px;
				 height: 40px;
				background-color:#1fc8db;
				background-image:linear-gradient(141deg,#9fb8ad 0%,#1fc8db 51%,#2cb5e8 75%);
				color:white;
				opacity:0.95;
				text-align:center;
				margin:auto;
				color:#f3f3f3;
				font-size:20px;
				font-weight:550;
			 }
			 .help{
				 width: 80%;
				 position: relative;
			 }
			 .ds{
				 position: absolute;
				 top: 0;
				 right: 10px;
			 }
		</style>
	</head>
	<body>
		<div id="app">
			<div class="nav">
				<div class="picBg">
					<div class="pic">
						<img src="http://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=184773349&src_uin=www.jlwz.cn&fid=blog&spec=100"  > 
					</div>
				</div>
			 
				
			</div>
			<div class="mybox">
				<div class="picBg">
					<div class="pic">
						<img src="http://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=184773349&src_uin=www.jlwz.cn&fid=blog&spec=100"  > 
					</div>
				</div>
				<div>
					会不会用呢
				</div>
			</div>
			 
 <input class="Inp"  placeholder="输入分享链接" type="text" v-model="url" /><a :href="urls" target="_blank"><button class="Btn"  @click="rout()" type="" >播放1</button></a> <button class="Btn"  @click="help()" type="" >帮助</button>
			<br/>
			<input class="Inp" type="text" v-model="url" /><a :href="urls" target="_blank"><button class="Btn" @click="rout1()" type="" class="layui-btn layui-btn-normal">播放2</button></a>
		<div class="text">
			<h4>复制纯链接，去掉中文文字！！！可以在下方文本编辑区编辑</h4>
			<textarea rows="8" cols="40">
			
			</textarea>
		</div>
		<div class="help" v-if="show">
			<h1>复制你刚才的链接 粘贴到输入框里面 然后点击播放</h1>
			<img src="img/QQ截图20210219215753.jpg" >
			<button @click="ds()" class="ds" type="">我知道了</button>
		</div>
			 <button class="Btn" @click="getfun">来个笑话</button>
			 {{info.msg}}
			     <ul>
			         <li v-for="(item,index) in info.jokes">{{index+1}}：{{item}}</li>
			     </ul>
		</div>
		
		<script>
			var app = new Vue({
				el: '#app',
				data(){
		return{
			url1:'http://api.myzch.cn/?url=',
			url2:'http://jx.myzch.cn/?v=',
			url:'',
			urls:'',
			show:false,
			info:{
			    msg:"正在获取",
			    jokes:[],
			
			}
		}
				},
				
				methods:{
					rout(){
						if(this.url!=''){
							this.urls=this.url1+this.url;
						}else{
							alert("请输入链接")
						}
					
					},
					rout(){
						if(this.url!=''){
						this.urls=this.url2+this.url;
					 }else{
					 	alert("请输入链接")
					 }
					
					},
					getfun: function () {
					    axios.get("https://autumnfish.cn/api/joke/list?num=5").then(response=>(this.info=response.data));
						},
					help(){
						console.log("help")
						this.show=true;
					},
					ds(){
						this.show=false;
					}
				}
				
			})
		</script>
	</body>
</html>
